<template>
	<!-- header左侧列表 -->
	<div class="nav">
		<ul class="nav-box">
			<Logo/>
			<!-- 左侧列表 -->
			<HeaderList :list="list"/>
			<!-- 小轮播图 -->
			<li class="nav-item banner-box">
				<Banner :banner="banner"/>
			</li>
			<!--  -->
			<li class="nav-item download-app" @mouseover="hover('download', true)" @mouseleave="hover('download', false)" ref="download">
				<router-link to="">
					<span class="icon-box"><Icon type="phone"></Icon></span>
					<span class="icon-text">下载APP</span>
				</router-link>
			</li>
		</ul>
	</div>
</template>


<script>
import Logo from './Logo'
import HeaderList from "./HeaderList"
import Banner from '../Public/Banner'
export default{
	data(){
		return {
			// 列表的数据以及浮窗显示，定位数据
			list: [
				{
					id: 1,
					text: '番剧',
					to: ''
				},{
					id: 2,
					text: '游戏中心',
					to: '',
					name: 'gameCenter'
				},{
					id: 3,
					text: '直播',
					to: ''
				},{
					id: 4,
					text: '会员购',
					to: ''
				},{
					id: 5,
					text: '漫画',
					to: '',
					name: 'cartoon'
				},{
					id: 6,
					text: '赛事',
					to: ''
				},
			],
			// 轮播图数据
			banner: {
				items: [{
					id: 1,
					text: 'S10',
					img: '',
				},{
					id: 2,
					text: '',
					img: require('../../assets/image/banner.png')
				}],
				config: {
					dir: 'top',
					wh: 'height',
					speed: 3000
				}
			},
		}
	},
	methods:{
		// 移入显示浮窗移出隐藏
		hover(name, show){
			if(!name) return;
			this.$store.commit('pops/setPopsShow', {name, show})
		},
		// 根据元素设置起始位置，这里获取了所有有ref属性的元素
		getPosi(){
			let items = this.$refs;
			for(let name in items){
				let target = items[name][0] || items[name]
				this.$store.commit('pops/getComputedPosi', {name, target})
			}
		}
	},
	mounted(){
		this.getPosi();
	},
	components:{
		Logo,
		HeaderList,
		Banner
	}
}
</script>

<style lang="less" scoped>
.nav{
	height: 36px;
	line-height: 36px;
	.nav-box{
		display: flex;
		height: 36px;
		.nav-item{
			position: relative;
			margin-right: 12px;
			justify-content: center;
			align-items: center;
			white-space: nowrap;
			&:first-child{
				margin-right: 0;
			}
			a{
				display: block;
				width: 100%;
				height: 100%;
				cursor: pointer;
				font-size: 14px;
			}
		}
		.banner-box{
			width: 54px;
			height: 36px;
			margin-left: 12px;
			white-space: normal;
		}
		.download-app{
			margin-left: -2.5px;
			a{
				display: flex;
				align-items: center;
				width: 100%;
				height: 100%;
				.icon-text{
					padding-left: 2.2px;
					font-size: 14px;
				}
				.icon-box{
					padding-left: 2.2px;
					color: #00a1d6;
					font-size: 18px;
				}
			}
		}
	}
}
</style>
